<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Title</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
	<div id="page">
		<div class="page-header">
			<div class="content">
				<a href="index.html">节点列表</a>
				<a class="active" href="map.html">节点分布</a>
			</div>
		</div>
		<div id="mapContainer"></div>
		<div id="mapSearch" class="map-search">
			<a title="展开搜索" href="javascript:;" id="searchBtn">
				<i class="fa fa-search"></i>
			</a>
			<div class="item">
				<div class="label">节点名称</div>
				<input id="name" name="" type="text" class="form-control form-block" />
			</div>
			<div class="item">
				<div class="label">IP地址</div>
				<input id="ipAddress" name="" type="text" class="form-control form-block" />
			</div>
			<div class="item">
				<div class="label">端口号</div>
				<input id="port" name="" type="text" class="form-control form-block" />
			</div>
			<div class="item time">
				<div class="label">开始时间</div>
				<input id="start" name="" type="text" class="form-control form-block" />
			</div>
			<div class="item time">
				<div class="label">结束时间</div>
				<input id="end" name="" type="text" class="form-control form-block" />
			</div>
			<div class="item">
				<input type="button" value="查询" class="btn primary-btn">
			</div>
		</div>
	</div>
	<script src="../vendor/jquery.min.js"></script>
	<script src="../vendor/layer/layer.js"></script>
	<script src="../vendor/echarts/echarts.js"></script>
	<script src="../vendor/echarts/world.js"></script>
	<script src="../vendor/echarts/geodatas.js"></script>
	<script src="../vendor/laydate/laydate.js"></script>
	<script>
        /*地图初始化*/

        var myChart = echarts.init(document.getElementById('mapContainer'));
        function initDefaultMap() {
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = GeoData[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            option = {
                backgroundColor: '#292830',
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + ' : ' + params.value[2];
                    }
                },
                visualMap: {
                    min: 0,
                    max: 500,
                    calculable: true,
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'world',
	                roam:true,
                    label: {
                        normal: {
                            show:false,
                            formatter: function (params) {
                                return NameMap[params.name];
                            }
                        },
                        emphasis: {
                            show:true,
                            textStyle:{
                                color:'#fff',
                                fontFamily:'微软雅黑',
                                fontSize:12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#19191b',
                            borderColor: '#222127'
                        },
                        emphasis: {
                            areaColor: '#19191b'
                        }
                    }
                },
                series: [
                    {
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData([
                            {name: "海门", value: 9},
                            {name: "鄂尔多斯", value: 12},
                            {name: "招远", value: 12},
                            {name: "舟山", value: 12},
                            {name: "齐齐哈尔", value: 14},
                            {name: "秦皇岛", value: 136},
                            {name: "株洲", value: 143},
                            {name: "石家庄", value: 147},
                            {name: "莱芜", value: 148},
                            {name: "常德", value: 152},
                            {name: "保定", value: 153},
                            {name: "湘潭", value: 154},
                            {name: "金华", value: 157},
                            {name: "岳阳", value: 169},
                            {name: "长沙", value: 175},
                            {name: "衢州", value: 177},
                            {name: "廊坊", value: 193},
                            {name: "菏泽", value: 194},
                            {name: "合肥", value: 229},
                            {name: "武汉", value: 273},
                            {name: "大庆", value: 279},
                            {name: "亚美尼亚", value: 175},
                            {name: "塞浦路斯", value: 177},
                            {name: "卡塔尔", value: 193},
                            {name: "马尔代夫", value: 194},
                            {name: "锡金", value: 229},
                            {name: "博茨瓦纳", value: 273},
                            {name: "越南", value: 279},
                            {name: "肯尼亚", value: 175},
                            {name: "科摩罗", value: 177},
                            {name: "利比亚", value: 193},
                            {name: "毛里求斯", value: 194},
                            {name: "上沃尔特", value: 229},
                            {name: "塞内加尔", value: 273},
                            {name: "索马里", value: 279}
                        ]),
                        symbolSize: 8,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
        initDefaultMap();

        window.onresize = function(){
            myChart.resize();
        };

        //全局配置layer日期选择器皮肤
        if( laydate ){
            laydate.skin('yalan');
        }

        //全局配置layer弹出层皮肤
        if( layer ){
            layer.config({
                skin: 'admin'
            })
        }

        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas){
                end.min = datas;
                end.start = datas;
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas){
                start.max = datas;
            }
        };
        laydate(start);
        laydate(end);

        var searchOff = true;
        var mapSearch = $("#mapSearch");
        $("#searchBtn").on("click",function(){
            if( searchOff ){
                $(this).attr("title","收起搜索");
                mapSearch.stop().animate({'width':264},300,function(){
                    mapSearch.stop().animate({'height':423},300,function(){
                        mapSearch.find(".item").css({
	                        "opacity":1
                        })
                    })
				})
            }else{
                $(this).attr("title","展开搜索");
                mapSearch.find(".item").css({
                    "opacity":0
                });
                mapSearch.stop().animate({'height':30},300,function(){
                    mapSearch.stop().animate({'width':30},300)
                })
            }
            searchOff = !searchOff;
        })


	</script>
</body>
</html>